import React from 'react'
import { Form, Button, Toask, Loading } from '@/component/index'
import cssStyle from './index.module.css'
import { upload } from '@/api/upload.js'

class FormComponent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            form: {
                text: 'newsoul',
                password: 'react-ui',
                textarea: '',
                radio: '3',
                checkbox: [],
                select: '',
                selectMultiple: [],
                switch1: true,
                switch2: false,
                file: '',
                img: '',
                time: '',
                calendar: '2021-10-19 12:00:00',
            },
            showPassword: false
        }
        this.rules = {
            text(value){
                if(value === ''){
                    return '不能为空'
                }
                return true
            },
            password(value){
                if(value === ''){
                    return '不能为空'
                }else if(value.length < 6){
                    return '长度需大于6'
                }
                return true
            },
            textarea(value){
                if(value === ''){
                    return '不能为空'
                }
                return true
            },
            radio(value){
                if(value === ''){
                    return '请选择一项'
                }
                return true
            },
            checkbox(value){
                if(value.length === 0){
                    return '至少选择一项'
                }
                return true
            },
            select(value){
                if(value === ''){
                    return '请选择一项'
                }
                return true
            },
            selectMultiple(value){
                if(value.length === 0){
                    return '至少选择一项'
                }
                return true
            },
            time(value){
                if(value === ''){
                    return '请选择时间'
                }
                return true
            }
        }
        this.rulesRef = React.createRef()
    }
    setFormData = prop => {
        return value => {
            this.setState(state => {
                state.form[prop] = value
                return state
            })
        }
    }
    getFile = prop => {
        return file => {
            let formData = new FormData()
            formData.append('file', file)
            let toask = Toask()
            let loading = Loading()
            loading.showLoading('上传中...')
            upload(formData).then(res => {
                console.log(res)
                if(res.status){
                    toask.showToask({
                        type: 'success',
                        title: '上传成功',
                        duration: 1500
                    })
                }else{
                    toask.showToask({
                        type: 'error',
                        title: '上传失败',
                        duration: 1500
                    })
                }
            }).catch(e => {
                console.log(e)
                toask.showToask({
                    type: 'error',
                    title: '上传失败',
                    duration: 1500
                })
            }).finally(() => {
                loading.hideLoading()
            })
        }
    }
    submit(){
        this.rulesRef.current.validate(valid => {
            if(valid){
                console.log(this.state.form)
            }
        })
    }
    showPassword = () => {
        this.setState(state => {
            state.showPassword = !state.showPassword
            return state
        })
    }
    render(){
        return(
            <div className={ cssStyle.container }>
                <Form.form form={ this.state.form } ref={ this.rulesRef } rules={ this.rules }>
                    <Form.item label="input：" labelWidth="100px" prop="text">
                        <Form.input type="text" className={ cssStyle.input } value={ this.state.form.text } onChange={ this.setFormData('text') } placeholder="..." disabled />
                    </Form.item>
                    <Form.item label="password：" labelWidth="100px" prop="password">
                        <Form.input type="password" className={ cssStyle.input } value={ this.state.form.password } onChange={ this.setFormData('password') } placeholder="..." />
                    </Form.item>
                    <Form.item label="radio：" labelWidth="100px" prop="radio">
                        <Form.radioGroup value={ this.state.form.radio } onChange={ this.setFormData('radio') }>
                            <Form.radio label="radio 1" value="1" disabled />
                            <Form.radio label="radio 2" value="2" />
                            <Form.radio label="radio 3" value="3" />
                        </Form.radioGroup>
                    </Form.item>
                    <Form.item label="textarea：" labelWidth="100px" prop="textarea">
                        <Form.input type="textarea" className={ cssStyle.input } value={ this.state.form.textarea } onChange={ this.setFormData('textarea') } placeholder="..." />
                    </Form.item>
                    <Form.item label="checkbox：" labelWidth="100px" prop="checkbox">
                        <Form.checkboxGroup value={ this.state.form.checkbox } onChange={ this.setFormData('checkbox') }>
                            <Form.checkbox label="checkbox 1" value="1" />
                            <Form.checkbox label="checkbox 2" value="2" disabled />
                            <Form.checkbox label="checkbox 3" value="3" />
                        </Form.checkboxGroup>
                    </Form.item>
                    <Form.item label="select：" labelWidth="100px" prop="select">
                        <Form.select value={ this.state.form.select } onChange={ this.setFormData('select') } placeholder="请选择...">
                            <Form.option label="option 1" value="1" />
                            <Form.option label="option 2" value="2" />
                            <Form.option label="option 3" value="3" />
                            <Form.option label="option 4" value="4" />
                            <Form.option label="option 5" value="5" />
                            <Form.option label="option 6" value="6" />
                            <Form.option label="option 7" value="7" />
                            <Form.option label="option 8" value="8" />
                            <Form.option label="option 9" value="9" />
                            <Form.option label="option 10" value="10" />
                            <Form.option label="option 11" value="11" />
                            <Form.option label="option 12" value="12" />
                            <Form.option label="option 13" value="13" />
                            <Form.option label="option 14" value="14" />
                        </Form.select>
                    </Form.item>
                    <Form.item label="multiple：" labelWidth="100px" prop="selectMultiple">
                        <Form.select multiple value={ this.state.form.selectMultiple } onChange={ this.setFormData('selectMultiple') } placeholder="请选择...">
                            <Form.option label="option 1" value="1" />
                            <Form.option label="option 2" value="2" />
                            <Form.option label="option 3" value="3" />
                            <Form.option label="option 4" value="4" />
                            <Form.option label="option 5" value="5" />
                            <Form.option label="option 6" value="6" />
                        </Form.select>
                    </Form.item>
                    <Form.item label="timePicker：" labelWidth="100px" prop="time">
                        <Form.timePicker value={ this.state.form.time } onChange={ this.setFormData('time') } placeholder="请选择..." />
                    </Form.item>
                    <Form.item label="calendar：" labelWidth="100px">
                        <Form.calendar value={ this.state.form.calendar } onChange={ this.setFormData('calendar') } placeholder="请选择..." />
                    </Form.item>
                    <Form.item label="switch：" labelWidth="100px">
                        <Form.switch value={ this.state.form.switch1 } activeText="开" inactiveText="关" onChange={ this.setFormData('switch1') } style={{ marginRight: '20px' }} />
                    </Form.item>
                    <Form.item label="switch：" labelWidth="100px">
                        <Form.switch value={ this.state.form.switch2 } activeText="开" inactiveText="关" onChange={ this.setFormData('switch2') } disabled />
                    </Form.item>
                    <Form.item label="upload：" labelWidth="100px">
                        <Form.upload value={ this.state.form.file } onChange={ this.getFile('file') }>
                            <Button type="primary" size="small">点击上传</Button>
                        </Form.upload>
                    </Form.item>
                    {/* <Form.item label="img：" labelWidth="100px">
                        <Form.upload value={ this.state.form.img } onChange={ this.getFile('img') }>
                            <div className={ cssStyle.uploadIcon }>
                                {
                                    this.state.form.img
                                    ?
                                    <img src={ this.state.form.img } alt="img" />
                                    :
                                    <span>+</span>
                                }
                            </div>
                        </Form.upload>
                    </Form.item> */}
                    <Button type="primary" size="medium" onClick={ this.submit.bind(this) } style={{ marginLeft: '100px' }}>确定</Button>
                    <Button type="error" size="medium" onClick={ () => { this.rulesRef.current.clearValidate() } } style={{ marginLeft: '20px' }}>清除</Button>
                    <Button type="error" size="medium" onClick={ this.showPassword } style={{ marginLeft: '20px' }}>toggle</Button>
                </Form.form>
            </div>
        )
    }
}

export default FormComponent